<template>
	<view>
		<view class="wep">
			<view class="lsit">
				<navigator v-for="(item,index) in data.data_list" :key="index" :url="'/pages/noticeDetails/noticeDetails?id='+item.id" class="item">
					<view class="lsit-time">{{item.createtime}}</view>
					<view class="lsit-content">
						<view class="lsit-content-left flex-center">
							<image src="@/static/img/laba.png">
							</image>
							<view class="lsit-content-tips">{{item.title}}</view>
						</view>
						<view class="lsit-content-bottom">
							<view>{{item.content}}</view>
						</view>
					</view>
				</navigator>
			</view>
			
			<view style="text-align:center;margin-top:120rpx" v-if="data.no_list">
				<view style="color:#444">暂无数据</view>
			</view>
			<view class="flex-y-center flex-x-center"
				style="text-align: center;height: 74rpx;color: #888;font-size: 9pt" v-if="!data.no_list&&data.no_more">
				没有更多了~</view>
			<view style="text-align: center;height: 174rpx;color: #888;font-size: 9pt"
				class="flex-y-center flex-x-center" v-if="!data.no_list&&!data.no_more">
				加载中...
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getNoticeList,
	} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				data:{
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},
				lock:0,
			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function(t) {
			var o = this;
			o.loadDataList(function() {
				o.data.loading_more = !0;
			});
		},
		onLoad() {
			this.loadDataList();
		},
		methods: {
			//获取数据列表
			loadDataList: function(f) {
				var o = this;
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
					var page = (o.data.current_page || 0) + 1;
					var data = {
						page: page,
					}
					o.lock = 1;
					console.log(o.lock)
					getNoticeList(data).then((t) => {
						if (t.code == 1) {
							if (1 == t.data.current_page && !t.data.data.length) {
								o.data.no_list = !0;
								o.data.loading_more = !1
							}
							if (t.data.data && t.data.data.length) {
								o.data.data_list = o.data.data_list || [];
								o.data.data_list = o.data.data_list.concat(t.data.data),
								o.data.current_page = page;
							}
							if (!t.data.has_more) {
								o.data.no_more = !0;
							}
						
						} else {
							uni.showToast({
								title: '网络繁忙',
								icon: 'error'
							})
						}
						o.lock = 0;
					});
				}
			},
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
	.wep .lsit {
		margin: 10px 15px
	}

	.wep .lsit .lsit-time {
		text-align: center;
		color: #bec1c7;
		font-size: 15px;
		margin-bottom: 10px
	}

	.wep .lsit .lsit-content {
		background-color: #fff;
		padding: 10px 7px;
		border-radius: 10px
	}

	.wep .lsit .lsit-content .lsit-content-left image {
		width: 16px;
		height: 16px
	}

	.wep .lsit .lsit-content .lsit-content-left .lsit-content-tips {
		margin-left: 7px;
		color: #333;
		font-size: 16px;
		font-weight: 700
	}

	.wep .lsit .lsit-content .lsit-content-bottom {
		padding: 10px 0px;
		color: #bec1c7;
		font-size: 13px
	}

	.wep .lsit-banner {
		padding: 10px 15px
	}

	.wep .lsit-banner .lsit-time {
		text-align: center;
		color: #bec1c7;
		font-size: 15px;
		margin-bottom: 10px
	}

	.wep .lsit-banner .banner {
		height: 192px;
		background-color: #fff;
		border-radius: 10px
	}

	.wep .lsit-banner .banner image {
		height: 140px;
		width: 100%;
		border-radius: 10px
	}

	.wep .lsit-banner .banner-text {
		height: 20px;
		padding: 0px 7px;
		margin-top: 10px;
		color: #333;
		font-size: 16px;
		font-weight: 700
	}
</style>
